body{
	background-color: #f5f5f5; 
}
h3,p{
	padding: 0;
	margin: 0;
}
ul,dl,dt,dd{
	list-style: none;
	padding: 0;
	margin: 0;
}

a{
	text-decoration: none;
	color: #333;
}
.container{
	width: 1024px;
	margin: 0 auto;
}

.title{
	text-align: center;
	font-size: 28px;
	color: #333;
	letter-spacing: 5px;
	margin: 10px;
}
nav{
	height: 50px;
	width: 440px;
	background: #ccc;
	border-radius: 5px;
	margin: 0 auto;
	position: relative;
}

nav .nav-above,nav .nav-black{
	position: absolute;
	top: 0;
	left: 20px;
}

nav .nav-above{
	z-index: 3;
	cursor: pointer;
}

nav .nav-black{
	z-index: 2;
}

nav .nav-above li,nav .nav-black li{
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	float: left;
}

nav .nav-move{
	width: 100px;
	height: 50px;
	background: #333;
	border-radius: 5px;
	position: absolute;
	left: 20px;
	overflow: hidden;
	z-index: 2;
}

nav .nav-move .nav-white{
	width: 400px;
	position: absolute;
	left: 0;
	top: 0;
}
nav .nav-move .nav-white{
	z-index: 2;
}

nav .nav-move .nav-white li{
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	float: left;
}



#skin-move{
	width: 200px;
	height: 145px;
	border: 2px solid #f60;
	position: absolute;
	left: 0px;
	top: -1px;
	z-index: 1;
}

#skin-above{
	position: absolute;
	/*left: 112px;*/
	z-index: 2;
	/*border: 1px solid red;*/
}

#skin-above li{
	width: 252px;
	height: 144px;
	float: left;
	cursor: pointer;
}

figure{
	padding: 0;
	margin: 0;
	float: left;
	cursor: pointer;
	border: 1px solid #999;
}

figure figcaption {
	text-align: center;
	height: 20px;
	line-height: 20px;
	color: maroon;
	font-size: 14px;
	letter-spacing: 2px;
}

#skin figure{
	margin: 0 25px;
}

.clear{
	clear: both;
}

#banner{
	margin-top: 10px;
	margin-bottom: 10px;
}

#banner-left{
	width: 130px;
	height: 290px;
	padding: 10px 25px 0 25px;
	background: #333;
	border-radius: 5px;
	position: absolute;
	left: 0;
	top: 0;
}

#banner-left li {
	width: 130px;
	height: 51px;
	padding-right: 25px;
	margin-bottom: 6px;
	cursor: pointer;
}

#banner-left li span.word{
	display: block;
	width: 130px;
	height: 50px;
	text-align: center;
	letter-spacing: 1px;
	font-size: 18px;
	line-height: 50px;
	color: #A3A5A3;
	border-bottom: 1px solid rgba(152,152,152,0.5); 
}


#banner-left li .banner-cover{
	width: 155px;
	height: 50px;
	background-color: rgba(104,110,116,0.6); 
	position: absolute;
	left: 25px;
	top: 10px;
	z-index: 1px;
	display: none;
}

#banner-left li .banner-cover span{
	display: block;
	width: 130px;
	height: 50px;
	text-align: center;
	letter-spacing: 1px;
	font-size: 18px;
	line-height: 50px;
	color: #fff;
}

#banner-left li .banner-box {
	width: 350px;
	height: 300px;
	color: #333;
	font-weight: bold;
	text-align: center;
	background: #e9e9e9;
	border: 1px solid #ccc;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	position: absolute;
	top: 0;
	left: 180px;
	display: none;
	z-index: 10;
	opacity: 0;
	filter: alpha(opacity=0);
}

#banner-center{
	height: 300px;
	width: 600px;
	background: #333;
	position: absolute;
	left: 200px;
	overflow: hidden;
}

#banner-center .banner-img{
	width: 600px;
	height: 300px;
	line-height: 300px;
}

.banner-img-1, .banner-img-2, .banner-img-3 {
	text-align: center;
	color: maroon;	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
}
.banner-img-1{background: #99CCCC;z-index: 2;}
.banner-img-2{background: #99CCFF}
.banner-img-3{background: #99CC66}

#banner-center .banner-bottom {
	height: 50px;
}

.banner-bottom {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(50,50,50,0.7);
	z-index: 3;
}

#banner-center .banner-dot {
	position: absolute;
	left: 255px;
	top: 0;
}

#banner-center .banner-dot li{
	height: 50px;
	width: 30px;
	line-height: 50px;
	font-size: 22px;
}

.banner-dot li{
	float: left;
	text-align: center;
	cursor: pointer;
}

#banner-center .banner-text{
	display: block;
	height: 50px;
	line-height: 50px;
	text-indent: 10px;
	color: #f5f5f5;
}


#banner-right{
	height: 300px;
	width: 200px;
	background: #ccc;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
}

#banner-right .banner-img{
	width: 200px;
	height: 300px;
	line-height: 300px;
}

.banner-img-1, .banner-img-2, .banner-img-3 {
	text-align: center;
	color: maroon;	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
}
#banner-right .banner-img-1{background: #CCCC99;z-index: 2;}
#banner-right .banner-img-2{background: #CC9966}
#banner-right .banner-img-3{background: #CCCC00}

#banner-right .banner-bottom {
	height: 50px;
}

#banner-right .banner-dot {
	position: absolute;
	left: 50px;
	top: 0;
}

#banner-right .banner-dot li{
	height: 50px;
	width: 30px;
	line-height: 50px;
	font-size: 22px;
}

#load figure{
	overflow: hidden;
	margin: 0 25px;
}

#load-move{
	width: 150px;
	height: 132px;
	border: 2px solid #99CC33;
	position: absolute;
	left: 25px;
	top: -1px;
	z-index: 1;
}

#load-above{
	position: absolute;
	left: 0px;
	z-index: 2;
	/*border: 1px solid yellow;*/
}

#load-above li{
	width: 202px;
	height: 136px;
	float: left;
	/*border: 1px solid red;*/
	cursor: pointer;
}

#load .img{
	width: 150px;
	height: 112px;
	overflow: hidden;
}

#drag .box{
	width: 600px;
	height: 490px;
	position: absolute;
	left: 300px;
	display: none;
	z-index: 20;
	border: 1px solid #333;
}

#drag .head{
	color: #333;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	height: 40px;
	background: #ececec;
	cursor: move;
}

#drag .body{
	height: 450px;
	width: 600px;
	background: #333;
	position: absolute;
}

#drag .body .loading{
	margin-left: 285px;
	margin-top: 200px;
	display: block;
}

#drag .body .img{
width: 600px;
height: 450px;
position: absolute;
left: 0;
top: 0;
display: none;
}

#drag .close{
	height: 35px;
	width: 35px;
	font-size: 30px;
	line-height: 35px;
	text-align: center;
	position: absolute;
	right: 5px;
	top: 2px;
	color: maroon;
	background: #ccc;
	cursor: pointer;
}

#drag .close:hover{
	color: red;
	background: #bbb;
}

#screen {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	background-color: rgba(0,0,0,0.5); 
	z-index: 19;
	cursor: not-allowed;
}

#img-left,#img-right{
	height: 450px;
	width: 300px;
	background: rgba(0,0,0,0);
	position: absolute;
	left: 0;
	top: 0px;
	cursor: pointer;
}

#img-right{
	left:300px;
}

#go-left,#go-right{
	height: 80px;
	width: 80px;
	opacity: 0;
	background-color: rgba(0,0,0,0.7);
	filter: alpha(opacity=0);
	position: absolute;
	left: 0;
	top: 180px;
	line-height: 80px;
	text-align: center;
	color: #eee;
	font-weight: bold;
	font-size: 60px;
}

#go-right{
	left: 520px;
}

#message .left, #message .right{
	width: 450px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	padding: 10px 25px 10px;
}

#message .left{
	color: #555;
	float: left;
	background: #fff;
	position: relative;
}

/* #message .left  p{
	margin-bottom: 15px;
} */

#user,#email{
	width: 180px;
	height: 25px;
	text-indent: 10px;
}

#content{
	width: 300px;
	height: 80px;
	resize: none;
	text-indent: 6px;
}

#btn{
	display: block;
	margin : 0 auto;
	width: 100px;
	height: 35px;
	border: none;
	border-radius: 5px;
	background: #99CC33;
	color: #fff;
	letter-spacing: 5px;
	cursor: pointer;
}

#btn:hover{
	font-weight: bold;
	background: #99CC00;
	/*border: 1px solid #fff;*/
}

#message .right{
	float: right;
	background: #fff;
	height: 236px;
	overflow: scroll;
}

#message dl{
	margin-bottom: 10px;
}

#message .right dt{
	height: 25px;
	line-height: 25px;
	letter-spacing: 1px;
	color: maroon;
	border-bottom: 1px dashed #ccc;
	font-size: 14px;
}

#message .right dt span{
	font-size: 10px;
	margin-left: 10px;
	color: #666;
}


#message .right dd{
	margin-top: 8px;
	padding: 0 10px 0 15px;
	height: 18px;
	line-height: 18px;
	letter-spacing: 1px;
	text-indent: 20px;
	color: #333;
	font-size: 12px;
	height: auto;
	display: block;
}




#message .alert{
	height:28px;
	width:185px;
	position:relative;
	top:-28px;
	left:245px;
	height: 14px;
	line-height: 14px;
	font-size: 10px;
	padding-left: 15px;
}

#message .info{
	display: none;
	color: #06f;
	background: url(img/info.png) no-repeat left center;
}

#message .danger{
	display: none;
	color: maroon;
	background: url(img/danger.png) no-repeat left center;
}

#message .success{
	display: none;
	color: green;
	background: url(img/success.png) no-repeat left center;
}

#message .total-word{
	width: 360px;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	text-align: right;
}

#message .count{
	font-size: 14px;
	font-weight: bold;
}

#email-list{
	width: 180px;
	height: 100px;
	position: absolute;
	background: #fff;
	top: 85px;
	left: 82px;
	border: 1px solid #ccc;
	display: none;
}

#email-list li{
	width: 165px;
	padding-right:15px;
	height: 20px;
	line-height: 20px;
	text-indent: 15px;
	overflow: hidden;
	font-size: 12px;
	color: #666;
	cursor: pointer;
}

#email-list li:hover{
	color: #06f;
	background: #eee;
}

.total-word span{
	display: none;
}


footer{
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #444;
	font-size: 12px;
	background: #aaa;
	letter-spacing: 1px;
	margin-top: 15px;
}